<template>
	<view class="search-input">
		<view class="searchs1">
			<input type="text" class="searchs" @tap="handleToSearch" placeholder="搜索订单" />
			<view class="teb1">
				<view class="head-nav">
					<!-- 0:未支付 1:已支付，待配送 2:已配送 3:已送达 4:商家拒绝接单 5:已签收 6:已拒收  （初始状态为0：未支付） 7:已退款 8:退款失败 9:客户申请退款（待商家同意退款） -->
					<!-- 标签顺序：待配送 -> 点位 -> 配送中 -> 已送达 -> 已签收 -> 待退款 -->
					<view :class="navIndex==1?'activite':''" @click="checkIndex(1,1)">待配送</view>
					<view :class="navIndex==2?'activite':''" @click="checkIndex(2,0)">点位</view>
					<view :class="navIndex==3?'activite':''" @click="checkIndex(3,2)">配送中</view>
					<view :class="navIndex==4?'activite':''" @click="checkIndex(4,3)">已送达</view>
					<view :class="navIndex==5?'activite':''" @click="checkIndex(5,5)">已签收</view>
					<view :class="navIndex==6?'activite':''" @click="checkIndex(6,9)">待退款</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content">
			<view class="content" v-if="isTab">
				<view v-for="i in queryAllOrder"
					style="display: flex; border-bottom: 1px solid #E4E4E4; padding-bottom: 10rpx;">
					<view>
						<img :src="i.orderProducts[0].dtPic1" alt="" class="imgs">
					</view>
					<view style="flex: 1; min-width: 0;"> <!-- 关键修复：加 min-width:0 防止 flex 挤压 -->
						<view class="size1">{{i.orderProducts[0].productName}}</view>
						<view class="size">{{i.receiverAddress}}</view>
						<view class="size" style="margin: 10rpx 0;">下单时间：{{i.crtDt}}</view>
						<view class="size2">
							{{i.status==1?'待配送':i.status==2?'配送中':i.status==3?'已送达':i.status==5?'已签收':i.status==6?'客户拒收':i.status==9?'待退款':''}}
						</view>
						<view style="font-size: 26rpx;">
							<span style="color: #000; margin-right: 20rpx;">共:{{i.productCount}}件
								￥{{i.orderProducts[0].unitPrice}}</span>
							合计：<span style="font-weight: 600; font-size: 29rpx; color: #e25011;">{{i.amount}}元</span>
						</view>
						<!-- 按钮区域（修复后） -->
						<view class="btnbox">
							<span class="ps psty" v-if="i.status==1" @click="delivery(i,2,0,1)">配送</span>
							<span class="ps psjj" v-if="i.status==1" @click="delivery(i,4,0,1)">拒绝</span>
							<span class="ps psgeo" v-if="i.status==1 || i.status==2 || i.status==3"
								@click="navigateToMapMer(i)">导航</span>
							<span class="ps psty" v-if="i.status==2" @click="delivery(i,3,0,2)">送达</span>
							<span class="ps psjj" v-if="i.status==3" @click="delivery(i,7,4,7)">取消</span>
							<span class="ps psty" v-if="i.status==9" @click="delivery(i,7,2,9)">同意</span>
							<span class="ps psjj" v-if="i.status==9" @click="delivery(i,8,3,9)">拒绝</span>
							<span class="ps psxl" @click="tocall(i.receiverMobile)">联系客户</span>
							<span class="ps ps-climb" v-if="i.isClimbeStairs==1">爬楼</span>
						</view>
						<view class="bz" v-if="i.remark && i.remark!=''">备注：{{i.remark}}</view>
					</view>
				</view>
			</view>
			<view v-if="isMap">
				<!-- 111111111111 -->
				<map id="orderMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
					:markers="markers" :scale="scale" @markertap="onMarkerTap"></map>
			</view>
		</view>

		<view class="salesbox" v-if="afterSalesbox > 1">
			<view class="sales">
				<view class="salestext" v-if="afterSalesbox==2">是否同意退款请求？</view>
				<view class="salestext" v-if="afterSalesbox==3">是否拒绝退款请求？</view>
				<view class="salestext" v-if="afterSalesbox==4">是否取消该订单？</view>
				<view class="salesbtn">
					<text @click="delivery2()" style="border-right: 1px solid #999;color: #007AFF;">是</text>
					<text @click="afterSalesbox=false">否</text>
				</view>
			</view>
		</view>
		<TabBar currentPage="index"></TabBar>
		<!-- 可拖动的上传订单按钮 -->
		<view v-if="showUploadBtn" class="upload-btn" @touchstart="touchStart" @touchmove.prevent="touchMove"
			@touchend="touchEnd" :style="{left: btnLeft + 'px', top: btnTop + 'px'}" @click="handleUploadClick">
			<text class="icon">+</text>
			<text>上传订单</text>
		</view>
	</view>
</template>
<script>
	// 导入拆分后的逻辑
	import orderLogic from './index.js'
	import TabBar from '@/pages/common/components/TabBar.vue'
	export default {
		name: 'Input',
		...orderLogic, // 展开导入的逻辑
		components: {
			TabBar
			// TabBar: () => import('@/pages/common/components/TabBar.vue')
		}
	}
</script>

<style scoped>
	.search-input {
		font-size: 28rpx;
	}

	.searchs1 {
		position: fixed;
		top: 0;
		width: 100%;
		height: 220rpx;
		background: #5c7de8;
	}

	.searchs {
		width: 80%;
		border: 1rpx solid #aaa;
		border-radius: 8rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 15rpx 8rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 50rpx;
		margin-left: 54rpx;
		position: absolute;
		top: 40rpx;
	}

	.head-nav {
		min-width: 700rpx;
		margin-top: 20rpx;
		margin-left: -20rpx;
		display: flex;
		color: #e6e6e6;
	}

	.head-nav>view {
		margin-right: 20rpx;
		font-size: 30rpx;
	}

	.activite {
		color: #fff;
		font-size: 32rpx !important;
		padding-bottom: 5rpx;
		border-bottom: 2rpx solid #fff;
	}

	.content {
		height: 100%;
		margin-top: 230rpx;
	}

	.teb1 {
		margin-right: 48%;
		padding-top: 17%;
		padding-left: 8%;
		color: #fff;
	}

	.content img {
		width: 180rpx;
		height: 180rpx;
		margin-left: 28rpx;
	}

	.imgs {
		margin-top: 30rpx;
		margin-right: 30rpx;
	}

	/* 修复文本隐藏问题 */
	.size {
		color: #a5a5a5;
		font-size: 24rpx;
		width: 100%;
		/* 改为100%避免被截断 */
		word-break: break-all;
		/* 允许换行 */
	}

	.size1 {
		width: 100%;
		/* 改为100%避免被截断 */
		color: #000;
		font-weight: 600;
		font-size: 26rpx;
		margin: 10rpx 0;
		word-break: break-all;
		/* 允许换行 */
	}

	.bz {
		color: #000;
		width: 67%;
	}

	.size2 {
		margin: 0 0 10rpx 390rpx;
		color: #373ed1;
		word-wrap: break-word;
		word-break: break-all;
	}

	.dizhi {
		font-weight: bold;
		width: 178rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.dizhi1 {
		width: 90rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	/* 按钮容器样式 */
	.btnbox {
		display: flex;
		flex-wrap: wrap;
		/* 允许按钮换行 */
		gap: 10rpx;
		/* 按钮间距 */
		margin: 14rpx 0;
	}

	/* 按钮基础样式 - 增大版 */
	.ps {
		display: inline-block;
		text-align: center;
		border-radius: 16rpx;
		/* 稍微加大圆角 */
		padding: 12rpx 24rpx;
		/* 增大内边距：上下12rpx，左右24rpx */
		margin-right: 20rpx;
		font-size: 28rpx;
		/* 字体稍大 */
		white-space: nowrap;
		min-width: 80rpx;
		/* 最小宽度保证按钮不会太小 */
		line-height: 1.4;
		/* 更好的垂直居中 */
	}

	/* 按钮悬浮效果（可选） */
	.ps:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	/* 配送按钮 */
	.psty {
		background: #b5e1a8;
		color: #347110;
	}

	/* 拒绝按钮 */
	.psjj {
		background: #ffbbbb;
		color: #e23639;
	}

	/* 导航按钮 */
	.psgeo {
		background: #5c7de8;
		color: #fff;
	}

	/* 联系客户按钮 */
	.psxl {
		background: bisque;
		color: #caa201;
	}

	/* 爬楼按钮 */
	.ps-climb {
		background: #f9dcf6;
		color: #c25fb9;
	}

	.salesbox {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3)
	}

	.sales {
		position: fixed;
		top: 30%;
		left: 20%;
		padding-top: 50rpx;
		width: 460rpx;
		height: 260rpx;
		background: #fff;
		border-radius: 30rpx;
		border: 1rpx solid #cfcfcf;
		box-shadow: #acacac 0px 0px 10rpx;
	}

	.salestext {
		margin: 0 30rpx;
	}

	.salesbtn {
		display: flex;
		position: absolute;
		bottom: 0;
	}

	.salesbtn text {
		display: inline-block;
		width: 230rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		border-top: 1px solid #999;

	}

	/* 添加在样式最后 */



	/* 	.upload-btn:active {
	  transform: scale(0.95);
	} */


	/* 修改上传按钮样式 */
	.upload-btn {
		position: fixed;
		width: 140rpx;
		height: 140rpx;
		background-color: #ff0000;
		color: #fff;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 0, 0, 0.3);
		z-index: 9999;
		transition: transform 0.1s;
		border: 2rpx solid #fff;
		padding: 0;
		/* 添加这一行确保内边距一致 */
	}

	/* 调整图标和文字对齐 */
	.upload-btn .icon {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		width: 100%;
		/* 使图标宽度充满容器 */
		text-align: center;
		/* 水平居中 */
	}

	.upload-btn text {
		font-size: 26rpx;
		width: 100%;
		/* 使文字宽度充满容器 */
		text-align: center;
		/* 水平居中 */
		margin-left: 0;
		/* 移除之前的左边距 */
		padding: 0 10rpx;
		/* 添加均匀的内边距 */
	}

	/* 在 TabBar 组件内部应该有类似样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		/* 或其他适当高度 */
		z-index: 999;
	}

	.content {
		/* 修改为 */
		min-height: calc(100vh - 230rpx - 100rpx);
		/* 减去顶部和底部高度 */
		margin-top: 230rpx;
		padding-bottom: 100rpx;
		/* 为TabBar留出空间 */
	}
</style>